<template>
  <div class="wechat">
    <div class="wechat-left card">
      <div class="title">内容设置</div>
      <div class="titleV2">微信名称:</div>
      <el-input v-model="state.name" style="width: 240px" placeholder="微信名称" />
      <div class="titleV2">内容:</div>
      <el-input v-model="state.title" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="内容" />
      <div class="titleV2">评论:</div>
      <el-input v-model="state.comment" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="评论" />
      <div class="titleV2">头像:</div>
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-change="handleChange"
        :limit="1"
        :auto-upload="false"
      >
        <img width="100%" height="100%" :src="state.img" class="avatar" />
      </el-upload>
      <div class="titleV2">主图:</div>
      <el-upload
        class="avatar-uploader"
        action="#"
        :show-file-list="false"
        :on-change="handleChangeV2"
        :limit="1"
        :auto-upload="false"
      >
        <img width="100%" height="100%" :src="state.bigImg" class="avatar" />
      </el-upload>
    </div>
    <div class="wechat-right card">
      <div class="title">效果展示 <el-button type="primary" @click="_toImportPng"> 导出图片 </el-button></div>
      <div class="cont">
        <div class="body" id="shareBox">
          <div class="body-top">
            <div class="picture">
              <img :src="state.img" alt="" />
            </div>
            <div class="text">
              <!-- 微信名称 -->
              <div class="text-title">{{ state.name }}</div>
              <div class="text-article">
                {{ state.title }}
              </div>
              <img width="180px" height="180px" :src="state.bigImg" alt="" />
              <div class="text-tool">
                <div class="text-tool-left">
                  {{ state.time }}
                  <img style="width: 15px; height: 15px; margin-left: 10px" src="../../assets/images/delete.png" alt="" />
                </div>
                <div class="text-tool-right">
                  <img src="../../assets/images/drop.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="body-bottom">
            <!-- 点赞区 -->
            <div class="body-bottom-top">
              <div class="heart">
                <img width="20px" height="20px" src="../../assets/images/heart.png" alt="" />
              </div>
              <div class="image">
                <img style="border-radius: 5px" width="40px" height="40px" :src="state.img" alt="" />
              </div>
            </div>
            <div class="body-bottom-under">
              <div class="left">
                <img width="18px" src="../../assets/images/info.png" alt="" />
              </div>
              <div class="right">
                <img style="border-radius: 5px" width="40px" height="40px" :src="state.img" alt="" />
                <div class="right-text">
                  <div class="right-text-title">{{ state.name }}</div>
                  <div class="right-text-article">{{ state.comment }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="wechat">
import { ref, toRefs, onMounted, reactive } from "vue";
import html2canvas from "html2canvas";
const state = reactive({
  time: "",
  name: "刀谁别刀我",
  title: "大海和你都有治愈坏心情的超能力，心情不好的时候看看海，再想想你，海可以治愈心情，而你可以治愈一切",
  comment: "沧海桑田是缘，是劫，也是宿命。",
  img: "http://8.140.192.56:520/static/Snipaste_2024-05-31_09-21-02.png",
  bigImg: "http://8.140.192.56:520/static/Snipaste_2024-05-31_09-21-02.png"
});
onMounted(() => {
  getCurrentDateTime();
});
const _toImportPng = () => {
  html2canvas(document.querySelector("#shareBox")).then(canvas => {
    let saveUrl = canvas.toDataURL("image/png");

    let a = document.createElement("a");

    document.body.appendChild(a);

    a.href = saveUrl;

    a.download = "导出图片";

    a.click();
  });
};

const handleChange = (UploadFile, UploadFiles) => {
  var reader = new FileReader();
  //转base64
  reader.onload = function (e) {
    state.img = e.target.result; //将图片路径赋值给src
  };
  reader.readAsDataURL(UploadFile.raw);
};
const handleChangeV2 = (UploadFile, UploadFiles) => {
  var reader = new FileReader();
  //转base64
  reader.onload = function (e) {
    state.bigImg = e.target.result; //将图片路径赋值给src
  };
  reader.readAsDataURL(UploadFile.raw);
};

const getCurrentDateTime = () => {
  const now = new Date();
  let year = now.getFullYear(); // 年
  let month = now.getMonth() + 1; // 月，返回的是0-11的数字，所以需要+1
  let date = now.getDate(); // 日
  let hours = now.getHours(); // 时
  let minutes = now.getMinutes(); // 分

  // 格式化月和日，确保它们至少有两位数字
  month = month < 10 ? "0" + month : month;
  date = date < 10 ? "0" + date : date;
  hours = hours < 10 ? "0" + hours : hours;
  minutes = minutes < 10 ? "0" + minutes : minutes;
  state.time = `${year}年${month}月${date}日 ${hours}:${minutes}`;
};
</script>
<style>
.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.avatar-uploader .avatar {
  display: block;
  width: 120px;
  height: 120px;
}
</style>
<style lang="scss" scoped>
.titleV2 {
  margin: 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: var(--el-text-color-primary);
}
.card {
  .title {
    display: flex;
    justify-content: space-between;
    margin: 0 0 15px;
    font-size: 17px;
    font-weight: bold;
    color: var(--el-text-color-primary);
  }
  .text {
    font-size: 15px;
    line-height: 25px;
    color: var(--el-text-color-regular);
    .el-link {
      font-size: 15px;
    }
  }
}
.wechat {
  display: flex;
  height: 100%;
  &-left {
    width: 300px;
    margin-right: 20px;
  }
  &-right {
    flex: 1;
    border: 1px solid #ffffff;
    .cont {
      width: 550px;
      height: 680px;
      margin: 0 auto;
      font-family: wc;
      border: 1px solid #f6f6f6;
      .body {
        height: 650px;
        padding: 15px;
        &-top {
          display: flex;
          .picture {
            width: 50px;
            height: 50px;
            border-radius: 5px;
            img {
              width: 50px;
              height: 50px;
              border-radius: 5px;
            }
          }
          .text {
            flex: 1;
            margin-left: 15px;
            &-title {
              font-size: 17px;
              font-weight: 500;
              color: #586b94;
            }
            &-article {
              margin-bottom: 10px;
              font-size: 17px;
              font-weight: 500;
            }
            &-tool {
              display: flex;
              align-items: center;
              justify-content: space-between;
              &-left {
                display: flex;
                align-items: center;
                color: #aeabab;
              }
              &-right {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 20px;
                background: #f7f7f7;
                border-radius: 5px;
                img {
                  width: 10px;
                }
              }
            }
          }
        }
        &-bottom {
          margin-top: 5px;
          background: #f7f7f7;
          border-radius: 5px;
          &-top {
            display: flex;
            border-bottom: 1px solid #e7e7e7;
            .heart {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 60px;
            }
            .image {
              flex: 1;
              padding: 8px;
            }
          }
          &-under {
            display: flex;
            .left {
              display: flex;
              align-items: start;
              justify-content: center;
              width: 60px;
              margin-top: 15px;
            }
            .right {
              display: flex;
              flex: 1;
              padding: 8px;
              &-text {
                margin-left: 8px;
                &-title {
                  font-size: 17px;
                  font-weight: 500;
                  color: #586b94;
                }
                &-article {
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
